!<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
       * {
        margin: 0;
        padding: 0;
    }
    ul li {
        list-style: none;
        float: left;
        width: 30px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        color: rgba(255,255,255,.8);
        font-size: 14px;
    }
    .banner {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        margin-top: 60px;
    }
    .banner img {
        width: 100%;
        display: block;
    }
    .banner .page {
        background: rgba(0,0,0,.5);
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
    }
    .banner .page ul {
        float: right;
    }
    .current {
        color: #ff6700;
    }

    </style>
</head>
<body>
    <div class="banner">
        <div class="item">
          <img :src="dataList[currentIndex]">
        </div>
        <div class="page" v-if="this.dataList.length > 1">
          <ul>
            <li @click="gotoPage(prevIndex)">&lt;</li>  
            <li v-for="(item,index) in dataList" @click="gotoPage(index)" :class="{'current':currentIndex == index}">{{index+1}}</li>
            <li @click="gotoPage(nextIndex)">&gt;</li>
            
            
          </ul>
        </div>
      </div>
    <script> 
     
        var app= new Vue({ 
            el:"#app",
            data:{
                dataList:[
                "./images/1.png",
                 "./images/2.png",
                 "./images/3.png",
                 "./images/4.png",
                 "./images/5.png",
                 "./images/6.png",
                 "./images/7.png",
                 "./images/8.png",
                 "./images/9.png",
                 "./images/10.png",
                 "./images/11.png",
                ],
                currentIndex: 0,   //默认显示图片
                timer: null    //定时器
            },
            methods: {
                gotoPage(index) {
                this.currentIndex = index;
                },
                //定时器
                runInv() {
                this.timer = setInterval(() => {
                    this.gotoPage(this.nextIndex)
                }, 1000)
                }
            }, 
            computed: {
            //上一张
            prevIndex() {
                if(this.currentIndex == 0) {
                return this.dataList.length - 1;
                }else{
                return this.currentIndex - 1;
                }
            },
            //下一张
            nextIndex() {
                if(this.currentIndex == this.dataList.length - 1) {
                return 0;
                }else {
                return this.currentIndex + 1;
                    }
                }
            }
        });

    </script>
</body>
</html>